<template>
  <div class="app-container">
    <h1>数据统计</h1>
    <el-row :gutter="10">
      <el-col :span="3" v-for="item in countArr" :key="item.name">
        <div class="card-panel" style="margin-bottom: 20px;">
          <div class="name">{{ item.name }}</div>
          <div class="count">{{ item.count }}</div>
        </div>
      </el-col>
    </el-row>

    <h1>统计图</h1>
    <el-row>
      <el-col :span="5">
        <span style="margin-right:10px">类型:</span>
        <el-select v-model="type" @change="handleEcharts">
          <el-option v-for="item in typeArr" :key="item.type" :label="item.name" :value="item.type" />
        </el-select>
      </el-col>
      <el-col :span="6">
        <span style="margin-right:10px">时间:</span>
        <el-select v-model="timeStatus" @change="handleEcharts">
          <el-option v-for="item in timeStatusArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-col>
    </el-row>

    <div style="width: 100%; height: 500px; overflow-x: auto;" ref="indexEcharts"></div>

  </div>
</template>

<script setup name="Index">
import * as echarts from 'echarts';

import {
  homePageStatis,
  count,
  statistics
} from '@/api/menu'

const type = ref('')
const typeArr = ref([])
const indexEcharts = ref(null)
const color = ref([
  "#219BFD",
  "#1DF6BF",
  "#365FE2",
  "#EAF7FA",
  "#89D200",
  "#E83D53",
  "#76A378",
  "#91BFFF",
  "#F6CB2F",
  "#BA7EF5",
  "#1F2BFF",
  "#4AE65C",
  "#6F07C6",
  "#DA048E",
  "#424D55",
  "#E5EAF0",
])

const countArr = ref([])
let myChart = null

const timeStatus = ref(0)

const timeStatusArr = ref([
  {
    label: '全部',
    value: 0
  },
  {
    label: '今天',
    value: 1
  },
  {
    label: '昨天',
    value: 2
  },
  {
    label: '一周内',
    value: 3
  },
  {
    label: '一月内',
    value: 4
  },
  {
    label: '三月内',
    value: 5
  },
  {
    label: '一年内',
    value: 6
  }
])

// 获取类型
function getHomePageStatis() {
  homePageStatis().then(res => {
    typeArr.value = res.data
    type.value = res.data[0].type
    handleEcharts()
  })
}

// 统计图处理
function handleEcharts() {
  const hexToRgba = (hex, opacity) => {
    let rgbaColor = "";
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
      rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
        "0x" + hex.slice(3, 5)
      )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
    }
    return rgbaColor;
  };


  statistics({
    type: type.value,
    status: timeStatus.value
  }).then(res => {
    console.log('统计图', res)
    res.data.datas.forEach((i, j) => {
      i.itemStyle = {
        color: color.value[j],
      };
      i.lineStyle = {
        normal: {
          color: color.value[j],
          shadowBlur: 3,
          shadowColor: hexToRgba(color.value[j], 0.5),
          shadowOffsetY: 8,
        },
      };
      i.areaStyle = {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [{
              offset: 0,
              color: hexToRgba(color.value[j], 0.3),
            },
            {
              offset: 1,
              color: hexToRgba(color.value[j], 0.1),
            },
            ],
            false
          ),
          shadowColor: hexToRgba(color.value[j], 0.1),
          shadowBlur: 10,
        },
      };
    });

    if (myChart) {
      myChart.dispose()
      myChart = null
    }

    myChart = echarts.init(indexEcharts.value);

    let option = {
      color: color.value,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff",
          },
        },
      },
      grid: {
        borderWidth: 0,
        top: 90,
        bottom: 95,
        textStyle: {
          color: "#fff",
        },
      },
      calculable: true,
      xAxis: [{
        type: "category",
        axisLine: {
          lineStyle: {
            color: "rgba(0,0,0,0.5)",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: res.data.dates,
      }],
      yAxis: [{
        type: "value",
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(0,0,0,0.5)",
          },
        },
      },],
      dataZoom: [{
        show: true,
        height: 20,
        xAxisIndex: [0],
        bottom: 30,
        start: 10,
        end: 80,
        handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "110%",
        handleStyle: {
          color: "#4D9EFC",
        },
        textStyle: {
          color: "#409EFF",
        },
        fillerColor: "#87BFFF",
        borderColor: "#409EFF",
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35,
      },
      ],
      series: res.data.datas,
    };
    myChart.setOption(option);

  })
}


function getCount() {
  count().then(res => {
    console.log('页面数量', res)
    countArr.value = res.data
  })
}

getCount()
getHomePageStatis()

</script>

<style scoped lang="scss">
.card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-color: rgba(0, 0, 0, .05);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 20px;

  .name {
    font-size: 20px;
  }

  .count {
    font-size: 24px;
  }
}
</style>

